package net.stogi.dsper.ui.client.module.dataobject;

import net.stogi.common.gwt.gxt.client.core.util.WidgetUtils;
import net.stogi.common.mvp.core.model.KeyValues;

import com.extjs.gxt.ui.client.core.Template;
import com.extjs.gxt.ui.client.util.Util;
import com.extjs.gxt.ui.client.widget.Composite;
import com.extjs.gxt.ui.client.widget.ContentPanel;

class DataObjectPreviewWidget extends Composite implements DataObjectPreviewView {

	private final ContentPanel mainPanel = new ContentPanel();  
	
	private final Template mainTemplate = new Template(internalPrepareDataSourceTemplate());

	public DataObjectPreviewWidget() {
		initComposite();
		initLayout();
		initComponent(mainPanel);
	}

	@Override
	public void appear() {
		mainPanel.show();
		// mainPanel.el().fadeIn(FxConfig.NONE);
	}

	@Override
	public void disappear() {
		// mainPanel.el().fadeOut(FxConfig.NONE);
		mainPanel.hide();
	}

	@Override
	public void displayDataObject(KeyValues<String> dataObject) {
		mainTemplate.overwrite(mainPanel.getBody().dom, Util.getJsObject(WidgetUtils.convertModelToModelData(dataObject)));
	}

	private void initComposite() {
		mainPanel.setHeading("Data Object Preview");
		mainPanel.setFrame(true);
		mainPanel.setWidth("100%");
		mainPanel.setVisible(false);
	} 
	
	private void initLayout() {}

	private native String internalPrepareDataSourceTemplate() /*-{ 
		return ['<div style="font-size: 12px;">',
		'<p><span style="font-weight: bold;">Title</span>: <a href="{link}">{title}<a></p>',
		'<p><span style="font-weight: bold;">Author:</span> {author}</p>',
		'<p><span style="font-weight: bold;">Published:</span> {publishedDate}</p>',
		'<p><span style="font-weight: bold;">Description</span>:</p>',
		'<p>{description}</p>',
		'</div>'].join("");
	}-*/;
}
